<template>
  <div class="discover-topbar-container">
    <div class="menu"><i class="iconfont icon-menu"></i></div>
    <div class="ipt flex-aj" data-v-5954443c="">
      <i class="iconfont icon-search"></i>
      音乐/视频/电台/用户
    </div>
    <div class="listen">
      <i class="iconfont icon-maikefeng"></i>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "DiscoverTopbar",
  setup() {},
});
</script>

<style scoped>
.discover-topbar-container {
  height: 100rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: var(--grap-color);
}

.search {
  flex: 1;
  padding: 12rem 32rem;
  background-color: var(--five-level);
  color: var(--three-level);
  border-radius: 64rem;
}

.user {
  flex: 1;
}

.search .icon-search {
  font-size: 34rem;
  margin-right: 6rem;
}

.search-text {
  font-size: 30rem;
}

.menu,
.listen {
  padding: 0 32rem;
}

.icon-menu,
.icon-maikefeng {
  font-size: 50rem;
}

.bg {
  background-color: var(--light-color);
}

.ipt {
  width: 522rem;
  height: 70rem;
  font-size: 28rem;
  background: #ffffff;
  border-radius: 35rem;
  color: #999999;
  overflow: hidden;
}

.flex-aj {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-aj i {
  margin-left: 30rem;
  margin-right: 10rem;
}
</style>
